/*
 * inputData 是否需要输入数据：true/false
 * dataFieldType 字段类型：固定,动态
 *
 */
import { commonStyle, fontStyle } from './common.config';
import { echarts } from "./echarts.config";
import { form } from "./form.config";
import { app } from "./app.config";
import { list } from "./list.config";
import { menu } from "./menu.config";

export const components = [
  {
    name: '基础组件',
    type: 'group',
    children: [
      {
        type: 'container',
        name: '容器',
        eventList: '点击事件',
        scene: '相对,绝对,应用',
        styleList: [
          {
            type: 'group',
            name: '基础设置',
            children: [
              {
                name: '打印区域',
                fieldName: 'print',
                fieldType: 'switch',
                default: false,
                options: [
                  {value: '', key: true},
                  {value: '', key: false}
                ]
              }
            ]
          },
          ...commonStyle,
        ]
      },
      {
        type: 'row',
        name: '分栏',
        scene: '相对,绝对,应用',
        styleList: [
          {
            type: 'group',
            name: '基础设置',
            children: [
              {
                name: '行数',
                fieldName: 'row',
                fieldType: 'number',
                default: 1,
              },
              {
                name: '列数',
                fieldName: 'col',
                fieldType: 'buttons',
                default: '2',
                options: [
                  {value: '1', key: '1'},
                  {value: '2', key: '2'},
                  {value: '3', key: '3'},
                  {value: '4', key: '4'},
                  {value: '5', key: '5'},
                ]
              },
              {
                name: '列占格数',
                fieldName: 'span',
                fieldType: 'multiple-number',
                number: (data) => parseInt(data['col'] || '2'),
                description: '每行占 24 格'
              }
            ]
          }
        ]
      },
      {
        type: 'text',
        name: '文本',
        inputData: true,
        fieldList: '内容',
        eventList: '初始化事件,点击事件',
        defaultObject: true,
        styleList: [
          {
            type: 'group',
            name: '基础设置',
            children: [
              {
                name: '是否富文本',
                fieldName: 'rich',
                fieldType: 'switch',
                default: false,
                options: [
                  {value: '', key: true},
                  {value: '', key: false}
                ],
              },
              {
                name: '内容格式化',
                fieldName: 'formatter',
                fieldType: 'buttons',
                default: '',
                options: [
                  {value: '无', key: ''},
                  {value: '模板', key: 'template'},
                  {value: '脚本', key: 'script'}
                ],
              },
              {
                name: '格式化模板',
                fieldName: 'formatterTemplate',
                fieldType: 'textarea',
                show: data => data['formatter'] === 'template',
                description: '内容标签：{value}，示例：￥{value}'
              },
              {
                name: '格式化脚本',
                fieldName: 'formatterScript',
                fieldType: 'textarea',
                show: data => data['formatter'] === 'script',
                description: '内容参数：value，示例：value === "1" ? "1" : "2"，传入参数：args.内容，args.参数名'
              },
              ...fontStyle(),
              {
                name: '对齐方式',
                fieldName: 'align',
                fieldType: 'buttons',
                options: [
                  {key: 'left', value: '居左'},
                  {key: 'center', value: '居中'},
                  {key: 'right', value: '居右'},
                ]
              },
              {
                name: '显示行数',
                fieldName: 'limitLine',
                fieldType: 'number',
                description: '最多显示行数，超出时隐藏。'
              }
            ]
          },
          {
            type: 'group',
            name: '鼠标经过设置',
            children: [
              {
                name: '字体颜色',
                fieldName: 'hover.fontColor',
                fieldType: 'color-picker',
              },
              {
                name: '显示下划线',
                fieldName: 'hover.underline',
                fieldType: 'switch',
                default: false,
                options: [
                  {key: true, value: ''},
                  {key: false, value: ''}
                ],
              }
            ]
          }
        ]
      },
      {
        type: 'icon',
        name: '图标',
        height: '30px',
        styleList: [
          {
            type: 'group',
            name: '基础设置',
            children: [
              {
                name: '选择图标',
                fieldName: 'iconId',
                fieldType: 'icon-select',
                iconSize: '20',
              },
              {
                name: '图标大小',
                fieldName: 'size',
                fieldType: 'number',
                default: 20
              },
              {
                name: '图标颜色',
                fieldName: 'color',
                fieldType: 'color-picker'
              }
            ]
          }
        ]
      },
      {
        type: 'affix',
        name: '附件',
        inputData: true,
        fieldList: '内容',
        styleList: [
          {
            type: 'group',
            name: '基础设置',
            children: [
              {
                name: '标题',
                fieldName: 'title',
                fieldType: 'input',
              },
              {
                name: '在线预览PDF',
                fieldName: 'showPdf',
                fieldType: 'switch',
                default: false,
                options: [
                  {value: '', key: true},
                  {value: '', key: false}
                ]
              },
              {
                name: '预览宽度',
                fieldName: 'width',
                fieldType: 'input',
                default: '800px',
                show: data => data['showPdf']
              },
              {
                name: '预览高度',
                fieldName: 'height',
                fieldType: 'input',
                default: '100vh',
                show: data => data['showPdf']
              },
              ...fontStyle()
            ]
          }
        ]
      },
      {
        type: 'image',
        name: '图片',
        height: '100px',
        inputData: true,
        fieldList: '内容',
        defaultObject: true,
        eventList: '点击事件',
        styleList: [
          {
            type: 'group',
            name: '基础设置',
            children: [
              {
                name: '宽度',
                fieldName: 'width',
                fieldType: 'input',
                default: '100%'
              },
              {
                name: '高度',
                fieldName: 'height',
                fieldType: 'input',
                default: '100%'
              },
              {
                name: '缩放模式',
                fieldName: 'fit',
                fieldType: 'select',
                default: 'contain',
                options: [
                  {value: '填满容器', key: 'fill'},
                  {value: '等比缩放', key: 'contain'},
                  {value: '裁剪填满', key: 'cover'},
                  {value: '原始尺寸', key: 'none'},
                  {value: '按比例缩小', key: 'scale-down'}
                ]
              },
              {
                name: '可否裁剪',
                fieldName: 'cropper',
                fieldType: 'switch',
                default: false,
                options: [
                  {value: '', key: true},
                  {value: '', key: false}
                ]
              },
              {
                name: '裁剪宽度',
                fieldName: 'cropper.width',
                fieldType: 'number',
                default: 160,
                show: data => data['cropper']
              },
              {
                name: '裁剪高度',
                fieldName: 'cropper.height',
                fieldType: 'number',
                default: 90,
                show: data => data['cropper']
              },
              {
                name: '显示图片',
                fieldName: 'default',
                fieldType: 'image',
                width: 60,
                height: 60
              },
              {
                name: '显示边框',
                fieldName: 'border',
                fieldType: 'switch',
                default: false,
                options: [
                  {value: '', key: true},
                  {value: '', key: false}
                ]
              },
              {
                name: '是否只读',
                fieldName: 'readonly',
                fieldType: 'switch',
                default: true,
                options: [
                  {value: '', key: true},
                  {value: '', key: false}
                ]
              },
              {
                name: '可否预览',
                fieldName: 'preview',
                fieldType: 'switch',
                default: false,
                options: [
                  {value: '', key: true},
                  {value: '', key: false}
                ]
              }
            ]
          }
        ]
      },
      {
        type: 'video',
        name: '视频',
        inputData: true,
        fieldList: '内容',
        defaultObject: true,
        styleList: [
          {
            type: 'group',
            name: '基础设置',
            children: [
              {
                name: '宽度',
                fieldName: 'width',
                fieldType: 'input',
                default: '640px'
              },
              {
                name: '高度',
                fieldName: 'height',
                fieldType: 'input',
                default: '360px'
              },
            ]
          }
        ]
      },
      {
        type: 'button',
        name: '按钮',
        eventList: '初始化事件,点击事件',
        styleList: [
          {
            type: 'group',
            name: '基础设置',
            children: [
              {
                name: '按钮名称',
                fieldName: 'buttonName',
                fieldType: 'input',
                default: '按钮',
              },
              {
                name: '尺寸',
                fieldName: 'size',
                fieldType: 'buttons',
                default: '',
                options: [
                  {value: '默认', key: ''},
                  {value: '大型', key: 'large'},
                  {value: '中型', key: 'default'},
                  {value: '小型', key: 'small'}
                ]
              },
              {
                name: '类型',
                fieldName: 'type',
                fieldType: 'buttons',
                default: 'primary',
                options: [
                  {value: '蓝色', key: 'primary'},
                  {value: '绿色', key: 'success'},
                  {value: '黄色', key: 'warning'},
                  {value: '红色', key: 'danger'},
                  {value: '灰色', key: 'info'}
                ],
              },
              {
                name: '样式',
                fieldName: 'style',
                fieldType: 'input',
                default: '',
                description: '示例：width: 100%'
              },
              {
                name: '朴素按钮',
                fieldName: 'plain',
                fieldType: 'switch',
                default: false,
                options: [
                  {value: '', key: true},
                  {value: '', key: false}
                ],
                description: '是否为朴素按钮'
              },
              {
                name: '文字按钮',
                fieldName: 'text',
                fieldType: 'switch',
                default: false,
                options: [
                  {value: '', key: true},
                  {value: '', key: false}
                ],
                description: '是否为文字按钮'
              },
              {
                name: '圆角按钮',
                fieldName: 'round',
                fieldType: 'switch',
                default: false,
                options: [
                  {value: '', key: true},
                  {value: '', key: false}
                ],
                description: '是否为圆角按钮'
              },
              {
                name: '圆形按钮',
                fieldName: 'circle',
                fieldType: 'switch',
                default: false,
                options: [
                  {value: '', key: true},
                  {value: '', key: false}
                ],
                description: '是否为圆形按钮'
              },
              {
                name: '前缀图标',
                fieldName: 'prefixIcon',
                fieldType: 'icon-select',
                iconSize: '20',
                default: '',
                description: '自定义前缀图标'
              },
              {
                name: '后缀图标',
                fieldName: 'suffixIcon',
                fieldType: 'icon-select',
                iconSize: '20',
                default: '',
                description: '自定义后缀图标'
              },
              {
                name: '显示确认框',
                fieldName: 'confirm',
                fieldType: 'switch',
                default: false,
                options: [
                  {value: '', key: true},
                  {value: '', key: false}
                ]
              },
              {
                name: '确认框类型',
                fieldName: 'confirmType',
                fieldType: 'buttons',
                default: 'info',
                options: [
                  {value: '成功', key: 'success'},
                  {value: '信息', key: 'info'},
                  {value: '告警', key: 'warning'},
                  {value: '错误', key: 'error'},
                ],
                show: (data) => data['confirm'] === true
              },
              {
                name: '确认框标题',
                fieldName: 'confirmTitle',
                fieldType: 'input',
                show: (data) => data['confirm'] === true
              },
              {
                name: '确认框内容',
                fieldName: 'confirmContent',
                fieldType: 'input',
                show: (data) => data['confirm'] === true
              },
              {
                name: '是否禁用',
                fieldName: 'disabled',
                fieldType: 'switch',
                default: false,
                options: [
                  {value: '', key: true},
                  {value: '', key: false}
                ]
              },
              {
                name: '需要授权',
                fieldName: 'permit',
                fieldType: 'switch',
                default: false,
                options: [
                  {value: '', key: true},
                  {value: '', key: false}
                ]
              }
            ]
          }
        ]
      },
      {
        type: 'captcha',
        name: '验证码',
        styleList: [
          {
            type: 'group',
            name: '基础设置',
            children: [
              {
                name: '宽度',
                fieldName: 'width',
                fieldType: 'input',
                default: '100px'
              },
              {
                name: '高度',
                fieldName: 'height',
                fieldType: 'input',
                default: '32px'
              },
            ]
          }
        ]
      },
      {
        type: 'carousel',
        name: '跑马灯',
        inputData: true,
        fieldList: '标题,图片',
        eventList: '点击条目事件',
        styleList: [
          {
            type: 'group',
            name: '基础设置',
            children: [
              {
                name: '高度',
                fieldName: 'height',
                fieldType: 'input',
                default: '250px'
              },
              {
                name: '自动播放',
                fieldName: 'autoplay',
                fieldType: 'switch',
                default: true,
                options: [
                  {value: '', key: true},
                  {value: '', key: false}
                ]
              },
              {
                name: '切换间隔',
                fieldName: 'interval',
                fieldType: 'number',
                default: 3000,
                show: data => data['autoplay']
              },
              {
                name: '箭头显示时机',
                fieldName: 'arrow',
                fieldType: 'buttons',
                default: 'hover',
                options: [
                  {key: 'always', value: '一直显示'},
                  {key: 'hover', value: '激活时显示'},
                  {key: 'never', value: '从不显示'},
                ]
              },
              {
                name: '展示方向',
                fieldName: 'direction',
                fieldType: 'buttons',
                default: 'horizontal',
                options: [
                  {key: 'horizontal', value: '水平方向'},
                  {key: 'vertical', value: '垂直方向'}
                ]
              },
            ]
          },
        ]
      },
      {
        type: 'tabs',
        name: '标签页',
        defaultStyle: {
          display: 'flex',
          "flex-direction": 'row',
          "justify-content": 'flex-start',
          "height": "30px"
        },
        inputData: true,
        scene: '相对,绝对,应用',
        styleList: [
          {
            type: 'group',
            name: '标签设置',
            children: [
              {
                name: '显示标签名',
                fieldName: 'showTabs',
                fieldType: 'switch',
                default: true,
                options: [
                  {value: '', key: true},
                  {value: '', key: false}
                ]
              },{
                name: '显示边框',
                fieldName: 'border',
                fieldType: 'switch',
                default: false,
                options: [
                  {value: '', key: true},
                  {value: '', key: false}
                ]
              },
              {
                name: '标签间隔',
                fieldName: 'gap',
                fieldType: 'input',
                default: '20px'
              },
              {
                name: '标签页名称',
                fieldName: 'tabsList',
                fieldType: 'style-list',
                showDialog: false,
                default: [
                  {name: '标签1'}
                ],
                options: [
                  {
                    name: '标签页名称',
                    fieldName: 'name',
                    fieldType: 'input'
                  }
                ],
              }
            ]
          },
          {
            type: 'group',
            name: '样式设置',
            children: [
              {
                name: '未选中样式',
                fieldName: 'styleList',
                fieldType: 'style-list',
                default: [
                  {
                    name: '未选中样式',
                    fontColor: '#7D7E80',
                    height: '30px',
                    padding: "0,0,0,0",
                    "justify-content": "center",
                    "align-items": "center",
                    "display": "flex",
                    "flex-direction": "column",
                    "flex-shrink": "0"
                  },
                ],
                defaultStyle: {
                  fontColor: '#7D7E80',
                  height: '30px',
                  padding: "0,0,0,0",
                  "justify-content": "center",
                  "align-items": "center",
                  "display": "flex",
                  "flex-direction": "column",
                  "flex-shrink": "0"
                },
                options: [
                  {
                    type: 'group',
                    name: '条件设置',
                    children: [
                      {
                        fieldName: 'conditionList',
                        fieldType: 'condition-list',
                      }
                    ]
                  },
                  {
                    type: 'group',
                    name: '字体样式',
                    children: [
                      ...fontStyle()
                    ]
                  },
                  ...commonStyle
                ],
              },
              {
                name: '已选中样式',
                fieldName: 'selected.styleList',
                fieldType: 'style-list',
                default: [
                  {
                    name: '已选中样式',
                    "fontColor": '#409EFF',
                    height: '30px',
                    padding: "0,0,0,0",
                    "justify-content": "center",
                    "align-items": "center",
                    "display": "flex",
                    "flex-direction": "column",
                    "flex-shrink": "0"
                  },
                ],
                defaultStyle: {
                  "fontColor": '#409EFF',
                  height: '30px',
                  padding: "0,0,0,0",
                  "justify-content": "center",
                  "align-items": "center",
                  "display": "flex",
                  "flex-direction": "column",
                  "flex-shrink": "0",
                },
                options: [
                  {
                    type: 'group',
                    name: '条件设置',
                    children: [
                      {
                        fieldName: 'conditionList',
                        fieldType: 'condition-list',
                      }
                    ]
                  },
                  {
                    type: 'group',
                    name: '字体样式',
                    children: [
                      ...fontStyle()
                    ]
                  },
                  ...commonStyle
                ],
              }
            ]
          }
        ]
      },
      {
        type: 'search',
        name: '查询框',
        defaultObject: true,
        defaultStyle: {
          "display": "flex",
          "flex-direction": "row",
          "justify-content": "flex-start",
          "align-items": "center",
          "padding": "0,15,0,15",
          "width": "200px",
          "radius-type": "simple",
          "border-radius": 20,
          "border-type": "simple",
          "border-style": "solid",
          "border-width": 1,
          "border-color": "#000000",
        },
        eventList: '初始化事件,点击查询事件',
        styleList: [
          {
            name: '输入框',
            type: 'group',
            children: [
              {
                name: '提示内容',
                fieldName: 'placeholder',
                fieldType: 'input',
                default: '请输入关键字'
              },
              {
                name: '背景模式',
                fieldName: 'bgMode',
                fieldType: 'buttons',
                options: '图片,线性,径向,颜色',
                default: '颜色'
              },
            ]
          },
          ...commonStyle
        ]
      },
      {
        type: 'qrcode',
        name: '二维码',
        height: '100px',
        inputData: true,
        fieldList: '内容',
        defaultObject: true,
        styleList: [
          {
            type: 'group',
            name: '基础设置',
            children: [
              {
                name: '宽度',
                fieldName: 'width',
                fieldType: 'input',
                default: '100%'
              },
              {
                name: '高度',
                fieldName: 'height',
                fieldType: 'input',
                default: '100%'
              }
            ]
          }
        ]
      },
      {
        type: 'iframe',
        name: '内联框架',
        height: '100px',
        inputData: true,
        fieldList: '内容',
        defaultObject: true,
        styleList: [
          {
            type: 'group',
            name: '基础设置',
            children: [
              {
                name: '宽度',
                fieldName: 'width',
                fieldType: 'input',
                default: '100%'
              },
              {
                name: '高度',
                fieldName: 'height',
                fieldType: 'input',
                default: '100%'
              },
            ]
          }
        ]
      },
      {
        type: 'router-view',
        name: '路由页面',
        scene: '相对,绝对,应用',
        styleList: commonStyle
      },
      {
        type: 'data',
        name: '数据加载组件',
        inputData: true,
        eventList: '数据加载事件',
        styleList: []
      }
    ]
  },
  {
    name: '通用组件',
    type: 'group',
    scene: '应用',
    children: app
  },
  {
    name: '图表组件',
    type: 'group',
    scene: '相对,绝对,大屏,应用',
    children: echarts
  },
  {
    name: '列表组件',
    type: 'group',
    children: list
  },
  {
    name: '表单组件',
    type: 'group',
    children: form
  },
  {
    name: '门户菜单组件',
    type: 'group',
    scene: '相对,绝对',
    children: menu
  },
];
